<template>
    <div>
        <div class="login-container" ref="loginBg">

            <div class="login-form-view">
                <div class="left-view">
                    <div style="font-size: 30px;margin-bottom: 15px;">您好，欢迎登录</div>
                    <div style="font-size: 30px;">陕西健康科普资源库</div>
                    <p style="color: #fff;">合作交流+科普服务+服务型资源库</p>
                </div>
                <el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left"
                    label-width="0px">
                    <div class="login-form-container">
                        <div style="font-size: 30px;">用户登录</div>
                        <p style="color: #666;">欢迎登录后台管理系统</p>
                        <div class="login-form-item">
                            <img class="login-icon" src="/static/img/logImg/icon1.png" alt="">
                            <el-select style="width: 260px;" v-model="loginForm.roleName" @change="selectRole"
                                placeholder="请选择登录角色">
                                <el-option v-for="item in roleList" :key="item.uid" :label="item.roleName"
                                    :value="item.roleName">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="login-form-item">
                            <img class="login-icon" src="/static/img/logImg/icon1.png" alt="">
                            <input type="input" v-model.trim="loginForm.account" autoComplete="off" autofocus="autofocus"
                                required="required">
                        </div>
                        <div class="login-form-item">
                            <img class="login-icon" src="/static/img/logImg/icon2.png" alt="">
                            <input :type="pwdType" id="password" v-model.trim="loginForm.password" name="password"
                                required="required">
                            <div class="drop-view">
                                <div class="pass-icon-view">
                                    <div :class="pwdType === 'password' ? 'show-pass-icon' : 'hide-pass-icon'"
                                        @click="showPwd">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="login-form-item-forget-pass">
                            <div class="remember-pass">
                                <input type="checkbox" id="autologin" name="autologin" value="1">
                                <span>记住密码</span>
                            </div>
                            <el-button @click.native.prevent="expertReg">专家注册</el-button>
                        </div>
                        <div class="login-btn-view">
                            <el-button type="primary" class="btn-login" :loading="loading"
                                @click.native.prevent="handleLogin">
                                登录
                            </el-button>
                        </div>
                        <div style="margin-top: 4px;cursor: pointer;font-size: 16px;color: #999;" @click="toResetPwd">忘记密码</div>

                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import { Base64 } from 'js-base64'
import { Decrypt, Encrypt } from '@/plugins/crypto.js'
import { queryTransportEnterpriseInfo } from '../../api/transportEnterprise'
import { userNoLogin } from '../../api/user'
import * as sysRole from "../../api/sysRole";
import { removeToken } from '@/utils/auth'
export default {
    name: 'login',
    data () {
        return {
            loginForm: {
                roleName: '',
                account: '',
                password: ''
            },
            loginRules: {
                account: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
                password: [{ required: true, trigger: 'blur', message: '请输入密码' },
                {
                        type: 'string',
                        message: '请输入不包含空格的字符',
                        trigger: 'blur',
                        transform(value) {
                          if (value && value.indexOf(' ') === -1) {
                            return value
                          } else {
                            return false
                          }
                        }
                      },
                      {
                        trigger: 'blur',
                        message: '密码必须由数字、字母、特殊字符组合,请输入6-16位',
                        validator: (rule, value, callback) => {
                          var passwordreg = /(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{6,16}/
                          if (!passwordreg.test(value)) {
                            callback(new Error('密码必须由数字、字母、特殊字符组合,请输入6-16位'))
                          }else{
                            callback()
                          }
                        }
                      },
                ]
            },
            loading: false,
            pwdType: 'password',
            index: 0,
            enterpriseUid: '',
            enterpriseName: '',
            token: '',
            roleList: [],
            bgImg: [{
                role: '运营人员',
                img: '/static/img/logImg/yy.png'
            }, {
                role: '机构管理员',
                img: '/static/img/logImg/jggl.png'
            }, {
                role: '专家',
                img: '/static/img/logImg/zj.png'
            }, {
                role: '机构',
                img: '/static/img/logImg/jg.png'
            }, {
                role: '专家管理员',
                img: '/static/img/logImg/zjgl.png'
            }, {
                role: '管理员',
                img: '/static/img/logImg/ptgl.png'
            },]
        }
    },
    methods: {
        showPwd () {
            if (this.pwdType === 'password') {
                this.pwdType = ''
            } else {
                this.pwdType = 'password'
            }
        },
        checkBOX () {

        },

        getInfo (name) {//企业账户：查询登录人所属企业信息
            let param = {
                name: name
            }
            const loading = this.$loading(this.Global.loadingOption);
            queryTransportEnterpriseInfo(param).then(response => {
                loading.close()
                if (response.data.data) {
                    this.enterpriseUid = response.data.data.uid
                    this.enterpriseName = response.data.data.name
                    localStorage.setItem('enterpriseUid', this.enterpriseUid)
                    localStorage.setItem('enterpriseName', this.enterpriseName)
                }
            }).catch(error => {
                loading.close()
                console.log(error)
            })
        },

        jiemi (data) {
            return Decrypt(data)
        },
        expertReg (){
             this.$router.push({ path: '/register' })
        },

        toResetPwd (){
              this.$router.push({ path: '/resetPwd' })
        },
        handleLogin () {
            if (this.loginForm.roleName == '') {
                this.$message.error('请选择登录账户的角色');
                return false
            }
            this.$refs.loginForm.validate(valid => {
                if (valid) {
                    this.loading = true
                    const param = Object.assign({}, this.loginForm)
                    param.loginName = param.account;
                    param.password = Base64.encode(param.password)
                    this.$store.dispatch('Login', param).then((response) => {
                        const data = response.data
                        console.log(data)
                        if (data.code === 200) {
                            const userDO = data.data
                            if (this.loginForm.roleName != userDO.roleName) {
                                this.loading = false
                                removeToken()
                                this.$message.error('登录账户的角色身份不符');
                                return false
                            }
                            localStorage.setItem('username', userDO.userName)
                            localStorage.setItem('password', this.loginForm.password)
                            localStorage.setItem('roleId', userDO.roleUid)
                            localStorage.setItem('loginUid', userDO.uid)
                            localStorage.setItem("user_info", JSON.stringify(userDO))
                            sessionStorage.setItem('bohui', 'kaiqi')
                            this.loading = false
                            this.$router.push({ path: '/' })
                            // if (category === '监管'){
                            //     this.$router.push({path: 'home'})
                            // }else if (category === '企业'){
                            //     if(unitName != null && userDO.unitName != ''){
                            //         this.getInfo(unitName)
                            //     }else{
                            //         localStorage.setItem('enterpriseUid', '1111') //新建企业用户没有指定所属企业时，该企业账户登录系统后，不能看见企业的信息
                            //         localStorage.setItem('enterpriseName', '1111')
                            //     }
                            //     this.$router.push({path: '/apply/enterpriseApplyList'})
                            // }

                        } else {
                            this.$message.error('用户名或者密码错误！');
                            this.loading = false
                        }
                    }).catch(() => {
                        this.loading = false
                    })
                } else {
                    this.$message.error('用户名或者密码错误！');
                    this.loading = false
                }
            })
        },

        noLogin () {
            this.$store.dispatch('NoLogin', this.token).then((response) => {//调用vuex中的NoLogin异步请求接口
                const data = response.data
                if (data.code === 200) {
                    var userDO = data.data
                    var loginName = userDO.loginName
                    var category = userDO.category
                    localStorage.setItem('loginName', loginName)
                    localStorage.setItem('username', loginName)
                    localStorage.setItem('category', category)
                    localStorage.setItem('supplier_username', userDO.token)//获取token
                    this.loading = false
                    if (category === '监管') {
                        this.$router.push({ path: 'home' })
                    }
                } else {
                    this.$router.push({ path: 'tokenError' })
                    this.loading = false
                }
            }).catch(() => {
                this.loading = false
            })
        },
        getRoleList () {
            const param = {}
            // sysRole.queryByPage(param).then(response => {
            //     this.roleList = response.data.data.rows
            // }).catch(error => {
            //     console.log(error)
            // })
        },
        selectRole (e) {
            let roleImg = ''
            this.bgImg.some(item => {
                if (item.role === e) {
                    roleImg = item.img
                    return true
                }
            })
            this.$refs.loginBg.style.background = `url(${roleImg})`
            this.$refs.loginBg.style.backgroundSize = '100% 100%'
        }
    },

    created () {
        this.token = this.$route.query.token;
        if (this.token) {//如果token存在的话，携带token发送免登录请求
            this.noLogin()//免登录处理
        }
        this.getRoleList()
    },
}
/* this.loading = false
 localStorage.setItem('supplier_username', this.loginForm.account)
 this.$router.push({path: 'home'})*/
</script>

<style rel="stylesheet/scss" scoped lang="scss">
.login-container {
    position: relative;
    width: 100%;
    background: url('/static/img/logImg/yy.png');
    background-size: 100% 100%;
    height: 100vh;
    display: flex;

    .login-form-view {
        height: 400px;
        position: absolute;
        top: 300px;
        left: 560px;
        display: flex;

        .left-view {
            width: 400px;
            height: 100%;
            padding: 60px 0 0 30px;
            color: #fff;
            box-sizing: border-box;
            /* 给元素设置模糊效果 */
            backdrop-filter: blur(8px);
            /* 设置背景颜色透明 */
            background-color: rgba(255, 255, 255, 0.2);
        }

        .login-form-container {
            width: 400px;
            background: hsl(0, 0%, 100%);
            height: 100%;
            padding: 30px 0 0 50px;
            box-sizing: border-box;

            .login-form-item {
                width: 300px;
                border-radius: 6px;
                border: solid 1px #CCCCCC;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                gap: 10px;
                font-size: 16px;
                color: #666666;
                margin-bottom: 20px;
                padding-left: 10px;
                height: 40px;

                input {
                    border: none;
                    width: 100%;
                }
            }

            .login-form-item-forget-pass {
                width: 300px;
                height: 30px;
                display: flex;
                align-items: center;
                justify-content: space-between;

                input {
                    width: 22px;
                    height: 22px;
                    border-color: #999999;
                }

                .remember-pass {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 16px;
                    color: #999999;
                    gap: 10px;
                }

                .forget-pass {
                    font-size: 16px;
                    color: #666666;
                }
            }
        }
    }
}

.login-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* 设置蒙版的颜色和透明度 */
}

.drop-view {
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;

    .el-dropdown-link {
        cursor: pointer;
        color: #CCCCCC;

    }

    .el-icon-arrow-down {
        font-size: 26px;
    }
}

.expand-view {
    flex: 1;
}


.v-div-line {
    width: 1px;
    height: 44px;
    background: #CCCCCC;
    margin-left: 10px;
}

input[type="password"]::-ms-reveal {
    display: none
}

input,
button {
    outline: none;
}

.login-btn-view {
    width: 300px;
    display: flex;
    align-items: center;
    justify-content: center;

    .btn-login {
        width: 300px !important;
        height: 30px;
        border-radius: 5px;
        border: none;
        background: linear-gradient(-45deg, #5bd1ae, #40b7a3);
        font-size: 20px;
        color: white;
        font-weight: bold;
        line-height: 10px;
        margin-top: 10px;
    }
}

.pass-icon-view {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .hide-pass-icon {
        width: 20px;
        height: 20px;
        background: url("/static/img/eye_icon2.png") no-repeat;
        background-size: cover;
        cursor: pointer;
    }

    .show-pass-icon {
        width: 20px;
        height: 20px;
        background: url("/static/img/eye_icon1.png") no-repeat;
        background-size: cover;
        cursor: pointer;
    }
}

.login-icon {
    width: 16px;
    height: 16px;
}

/deep/ .el-input__inner {
    border: none;
    height: 21px;
}

/deep/ .el-input--medium .el-input__icon {
    line-height: 23px;
}
</style>
